<template>
  <div class="classify-container">
    <div class="container">
      <div
        class="tableBar"
        style="display: inline-block"
      >
        <el-button
          type="primary"
          class="continue"
          @click="addClass('class')"
        >
          + 新增菜品分类
        </el-button>
        <el-button
          type="primary"
          @click="addClass('meal')"
        >
          + 新增套餐分类
        </el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
      >
        <el-table-column
          prop="name"
          label="分类名称"
        />
        <el-table-column
          prop="type"
          label="分类类型"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type == '1' ? '菜品分类': '套餐分类' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="操作时间"
        >
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
        />
        <el-table-column
          label="操作"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="editHandle(scope.row)"
            >
              修改
            </el-button>
            <el-popconfirm
              title="确认删除该数据吗？"
              @onConfirm="deleteHandle(scope.row.id)"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
                class="delBut"
              >
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      :title="classData.title"
      :visible.sync="classData.dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        class="form"
        label-width="100px"
      >
        <el-form-item label="分类名称：">
          <el-input
            v-model="classData.name"
            placeholder="请输入分类名称"
          />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="classData.sort" type="number" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="medium"
          @click="classData.dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="medium"
          @click="submitForm()"
        >确 定</el-button>
        <el-button
          v-if="action != 'edit'"
          type="primary"
          size="medium"
          class="continue"
          @click="submitForm('go')"
        > 保存并继续添加 </el-button>
      </span>
    </el-dialog></div>
</template>

<script>
import { getClassify, addClassify, deleteClassify, editClassify } from '@/api/classify'

export default {
  name: 'Classify',
  data() {
    return {
      action: '',
      counts: 0,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      tableData: [],
      type: '',
      classData: {
        'id': 0,
        'title': '添加菜品分类',
        'dialogVisible': false,
        'categoryId': '',
        'name': '',
        'sort': ''
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    init() {
      getClassify({ ...this.pageInfo }).then((res) => {
        // console.log(res.data)
        const { records, total } = res.data
        this.tableData = records
        this.counts = total
      })
    },
    handleClose() {
      this.classData.dialogVisible = false
    },
    handleSizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.init()
    },
    addClass(st) {
      if (st === 'class') {
        this.classData.title = '新增菜品分类'
        this.type = '1'
        // const type = this.type
        // console.log(type)
      } else {
        this.classData.title = '新增套餐分类'
        this.type = '2'
        // const type = this.type
        // console.log(type)
      }
      this.action = 'add'
      this.classData.name = ''
      this.classData.sort = ''
      this.classData.dialogVisible = true
      this.init()
    },
    submitForm(st) {
      const classData = this.classData
      if (this.action === 'add') {
        if ((classData.name !== '') && (classData.sort !== '')) {
          addClassify({ 'name': classData.name, 'type': this.type, sort: classData.sort }).then(res => {
            // console.log(res)
            this.$message.success('分类添加成功')
            if (!st) {
              this.classData.dialogVisible = false
              this.init()
            } else {
              this.classData.name = ''
              this.classData.sort = ''
            }
          })
        } else this.$message.error('请输入内容')
      } else {
        // 修改
        if ((classData.name !== '') && (classData.sort !== '')) {
          editClassify({ 'id': this.classData.id, 'name': classData.name, sort: classData.sort }).then(res => {
            // console.log(res)
            this.$message.success('分类修改成功')
            this.classData.dialogVisible = false
            this.init()
          }).catch(error => {
            this.$message.error('分类修改失败' + error.message)
          })
        } else this.$message.error('请输入内容')
      }
    },
    editHandle(data) {
      this.classData.title = '修改分类'
      this.action = 'edit'
      this.classData.name = data.name
      this.classData.sort = data.sort
      this.classData.dialogVisible = true
      this.classData.id = data.id
    },
    deleteHandle(id) {
      deleteClassify(id).then(res => {
        // console.log(res)
        this.$message.success('分类删除成功')
        this.init()
      })
    }
  }
}

</script>

    <style lang="scss" scoped>
    .classify{
      &-container {
        margin: 30px;
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
    }
    </style>
